<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  react核心库  -->
    <script src="lib/react.development.js"></script>
    <!--  reactdom:操作DOM  -->
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<!--指定挂载的位置-->
<div id="root">

</div>
</body>
<script src="lib/my.js" type="text/babel"></script>
<script type="text/babel">

    // 创建一个React容器
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    {
        // <内如果以小字母开头，那么会被认为是普通标签，如果以大写字母开头，被认为是组件（函数组件，类组件）
        // <内如果是以小字母开头，不允许出现浏览器不支持的标签。
        // {}内会被当作JS表达式去处理。
        // 浏览器不支持JSX
        // 1- JSX需要babel的支持
        // root.render(<div>1</div>)
    }
    {
        // 2- 如果JSX较复杂（标签包裹标签）
        // root.render((
        //     <div>
        //         <button>1</button>
        //         <button>2</button>
        //     </div>
        // ))
    }
    {
        // 3- 元素常量
        // const vDom = (
        //     <div>
        //         <span>2</span>
        //         <span>2</span>
        //         <span>2</span>
        //     </div>
        // )
        // root.render(vDom);
    }
    {
        // 4- JSX有且只能是一个根元素
        // 以下有异常：
        // root.render((
        //     <div>1</div>
        //     <div>2</div>
        // ))

        // 解决异常一：使用包裹标签<></>,不会被浏览器进行渲染
        // root.render((
        //     <>
        //         <div>1</div>
        //         <div>2</div>
        //     </>
        // ))

        // 解决异常二：React.
        // key
        // root.render((
        //     <React.Fragment>
        //         <div>1</div>
        //         <div>2</div>
        //     </React.Fragment>
        // ))
    }
    {
        // 5- 使用外部JSX
       root.render(vDOM);
    }
</script>
</html>